ReferenceError: h is not defined の倒しかた
tsx を Vue コンポーネントとして使っている時に、関数で Vue コンポーネントを返させるやつが混ざるとこれが起こる。
code:例えば.tsx
export const MyComponent = tsx.component({
name: "MyComponent",
props: {
post: {
type: Object as () => { content: string },
required: true,
},
},
render(): VNode {
return (
<div>
...なんちゃら
{renderMyComponent(this.post.content)} // renderMyContent は (JSX.Element | undefined)[] を返す
</div>
)
}
https://gyazo.com/95766d773c5ac4ae0818576020c361cc
これは実質 render() が render(h: CreateElement) として変換されているからで、トップレベルだと暗黙的な変換で通るのだが、関数を経由する場合明示的に渡してやる必要がある。
渡った先の関数に CreateElement 相当がいないのでバグる
なので
code:index.tsx
import Vue, { VNode, CreateElement } from "vue"
export const MyComponent = tsx.component({
name: "MyComponent",
props: {
post: {
type: Object as () => { content: string },
required: true,
},
},
render(h: CreateElement): VNode {
return (
<div>
...なんちゃら
{renderMyComponent(this.post.content, h)} // h を受け取れるようにしてあげる
</div>
)
}
こうすると解決する。